<!--
 * @Descripttion: ---
 * @version: v1.0.0.0
 * @Author: 任飞
 * @Date: 2020-07-05 01:09:39
 * @LastEditors: 任飞
 * @LastEditTime: 2020-07-13 20:36:25
--> 
<template>
  <div class="wrap">
    <el-button type="primary" class="btn-sure" @click="doSubmit">确定关联角色</el-button>
    <el-table
      v-if="users && users.length"
      ref="multipleTable1"
      :data="users"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        prop="roleCode"
        label="角色"/>
      <el-table-column
        prop="roleName"
        label="角色名称"/>
      <el-table-column label="操作" width="350px" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="operateCompany(scope.row)">管理公司</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :append-to-body="true" :visible.sync="dialog" title="管理公司" width="500px">
      <el-select v-model="selectValue" placeholder="添加公司" style="margin-bottom: 20px" @change="handleSelect">
        <el-option
          v-for="item in allCompanys"
          :key="item.compNo"
          :label="item.compName"
          :value="item.compNo">
        </el-option>
      </el-select>
      <el-table
        v-if="companys.length"
        :data="companys"
        tooltip-effect="dark"
        style="width: 100%"
        border>
        <el-table-column
          prop="compName"
          label="公司名称"/>
        <el-table-column label="操作" width="350px" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDelCompany(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  // components: { Treeselect },
  data() {
    return {
      loading: false,
      dialog: false,
      form: { 
        compNo: '', 
        compName: '', 
      },
      companys: [], // 当前角色的公司信息
      allCompanys: [], // 所有公司信息
      selectValue: "", // 选中的公司信息
      currentRoleName: "",
      currentRoleCode: "",
      currentUserNo: "",
      users: [],
      multipleSelection: [],
      selectedArr: [],
      userNo: ""
    }
  },
  mounted() {
    this.getRoleDetail(this.$route.query.userNo)
    this.getAllCompany()
  },
  methods: {
    // 获取所有公司信息
    getAllCompany() {
      this.$api.fenxiao.company.listAll().then(res => {
        this.allCompanys = res.data
      })
    },
    // 管理公司
    operateCompany(obj) {
      this.dialog = true
      this.currentRoleName = obj.roleName
      this.currentRoleCode = obj.roleCode
      this.currentUserNo = obj.userNo
      this.handleCompany(obj.roleCode)
    },
    // 获取当前角色的公司信息
    handleCompany(code) {
      this.$api.fenxiao.companyUser.find(this.userNo, code).then(res => {
        this.companys = res.data
      })
    },
    // 删除公司
    handleDelCompany(id) {
      this.$api.fenxiao.companyUser.del(id).then(res => {
        this.handleCompany(this.currentRoleCode)
        this.$notify({ title: '删除成功', type: 'success', duration: 2500 })
      })
    },
    // 保存公司员工信息
    handleSelect() {
      const params = {
        compNo: this.selectValue,
        roleCode: this.currentRoleCode,
        roleName: this.currentRoleName,
        userNo: this.currentUserNo
      }
      this.$api.fenxiao.companyUser.save({data: params}).then(res => {
        this.handleCompany(this.currentRoleCode)
      })
    },
    getRoleDetail(userNo) {
      const arr = []
      this.$api.fenxiao.user.getUserDetail(userNo).then(res => {
        res.data.forEach(v => {
          if (v.checked) {
            arr.push(v)
          }
        })
        this.userNo = userNo
        this.users = res.data
        this.toggleSelection(arr)
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          setTimeout(() => {
            this.$refs.multipleTable1.toggleRowSelection(row)
          }, 200) 
        });
      } else {
        this.$refs.multipleTable1.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    doSubmit() {
      this.doEdit()
    },
    doEdit() {
      const arr = []
      this.multipleSelection.forEach(v => {
        arr.push({
          roleCode: v.roleCode,
          roleName: v.roleName,
        })
      })
      const formData = {
        sysUserRoleVoList: arr,
        userNo: this.userNo
      }
      this.$api.fenxiao.role.createRole({
        data: formData
      }).then(res => {
        this.$notify({ title: '关联成功', type: 'success', duration: 1000 })
        // this.$parent.init()
        this.$router.go(-1)
      }).catch(err => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
.wrap {
  padding: 50px;
  .btn-sure {
    margin-bottom: 20px;
  }
}
</style>
